<template>
  <view>
    <!-- 头部 -->
    <view class="header-container">
      <Header title="溯源记录">
        <uv-icon name="arrow-left" size="18" color="#000" @click="leftClick"></uv-icon>
      </Header>

      <!-- 选项卡 -->
      <uv-tabs
        ref="tabsRef"
        :list="tralist" 
        :activeStyle="{ color: '#0ccb75' }"
        :inactiveStyle="{ color: '#686868' }"
        class="xxk"
        :scrollable="false"
        :lineColor="'#0ccb75'"
        :lineWidth="activeLineWidth"
        @click="handleTabClick"
      ></uv-tabs>
    </view>

    <!-- 组件容器 -->
    <view class="content">
      <!-- 基本信息组件 -->
      <Trarecord v-if="activeIndex === 0" />

      <!-- 健康信息组件 -->
      <Trahealth v-if="activeIndex === 1" />

      <!-- 检疫信息组件 -->
      <Traquarantine v-if="activeIndex === 2" />

      <!-- 疫苗信息组件 -->
      <Travaccine v-if="activeIndex === 3" />

      <!-- 繁殖信息组件 -->
      <Trareproduce v-if="activeIndex === 4" />
    </view>
  </view>
</template>

<script setup>
import Header from '@/components/AppHeader/Header.vue';
import Trarecord from '@/pages/livestock/traceability/Trarecord.vue';
import Trahealth from '@/pages/livestock/traceability/Trahealth.vue';
import Traquarantine from '@/pages/livestock/traceability/Traquarantine.vue';
import Travaccine from '@/pages/livestock/traceability/Travaccine.vue';
import Trareproduce from '@/pages/livestock/traceability/Trareproduce.vue';
import { ref } from 'vue';

// 选项卡列表
const tralist = ref([
  { name: '基本信息' },
  { name: '健康信息' },
  { name: '检疫信息' },
  { name: '疫苗信息' },
  { name: '繁殖信息' },
]);

// 设置滑块的宽度
const activeLineWidth = ref(60);

// 当前活跃的选项卡索引
const activeIndex = ref(0);

// 选项卡点击事件处理
const handleTabClick = (event) => {
  const index = event.index;
  activeIndex.value = index; // 更新当前活跃选项卡索引
  console.log('选项卡点击事件触发，索引:', index);
};

// 返回按钮点击事件
const leftClick = () => {
  uni.navigateBack();
};
</script>

<style scoped lang="scss">
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 100;
}

.xxk {
  display: flex;
  justify-content: space-between;
}

.content {
  margin-top: 248rpx;
}

// 自定义滑块样式，确保居中
:deep(.uv-tabs__line) {
  left: 50% !important; // 滑块水平居中
  transform: translateX(-50%) !important; // 确保滑块居中
  width: v-bind(activeLineWidth) !important; // 动态绑定滑块宽度
}
</style>